<section class="page-wrapper">
    <div class="st_main">
        <div style="overflow: hidden;">
            <div class="st_zb">
                <div class="st_zb_content">
                    <div class="st_zb_title">
                        <div class="st_zt_text">今日关键指标</div>
                    </div>
                    <ul class="st_zb_ul">
                        <li>
                            <div class="st_zb_li_content" style="background-color: #FFBF32;">
                                <div class="st_zb_li_number" id="peopleTotalId">0</div>
                                <div class="st_zb_li_unit">就餐人数(人)</div>
                            </div>
                        </li>
                        <li>
                            <div class="st_zb_li_content" style="background-color: #9F70C7;">
                                <div class="st_zb_li_number" id="menuTotalId">0</div>
                                <div class="st_zb_li_unit">菜品总量(份)</div>
                            </div>
                        </li>
                        <li>
                            <div class="st_zb_li_content" style="background-color: #00BDF1;margin-top:10px;">
                                <div class="st_zb_li_number" id="avgPriceId">0</div>
                                <div class="st_zb_li_unit">人均消费(人)</div>
                            </div>
                        </li>
                        <li>
                            <div class="st_zb_li_content" style="background-color: #00BD97;margin-top:10px;">
                                <div class="st_zb_li_number" id="priceTotalId">0</div>
                                <div class="st_zb_li_unit">消费总额(元)</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="st_phb">
                <script type="text/html" id="top_list_template">
                    {{each menuTopList as value i}}
                    <tr>
                        <td>{{i+1}}</td>
                        <td>{{value.menuName}}</td>
                        <td>{{value.price}}</td>
                        <td>{{value.menuTotal}}</td>
                    </tr>
                    {{/each}}
                </script>

                <div class="st_phb_content">
                    <div class="st_zb_title">
                        <div class="st_zt_text">今日TOP10最受欢迎菜品排行榜</div>
                    </div>
                    <div class="st_phb_frame">
                        <table border="0" cellspacing="0" cellpadding="0" id="top_table_id">
                            <!--<tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                            <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                            <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                            <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                            <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                            <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                            <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                            <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>
                            <tr><td>1</td><td>清蒸洞庭湖大鱼头</td><td>128.00</td><td>837464</td></tr>-->

                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="st_list">
            <script type="text/html" id="order_list_template">
                {{each orderList as value i}}
                <tr>
                    <td>{{i+1}}</td>
                    <td>{{value.parentId}}</td>
                    <td>{{value.createDate}}</td>
                    <td>{{value.froms}}</td>
                    <td>{{value.people}}</td>
                    <td>{{value.menuTotal}}</td>
                    <td>{{value.state}}</td>
                    <td>{{value.originalPriceTotal}}</td>
                    <td>{{value.diffPiiceTotal}}</td>
                    <td>{{value.priceTotal}}</td>
                </tr>
                {{/each}}
            </script>
            <script type="text/html" id="order_list_none_template">
                <tr>
                    <td>序号</td>
                    <td>订单编号</td>
                    <td>下单时间</td>
                    <td class="st_pull_td">订单来源<span class="st_pull"></span>
                        <div class="pull_list">
                            <ul id="froms_id">
                                <li data-id="0,1">全部</li>
                                <li data-id="0">微信端</li>
                                <li data-id="1">服务员端</li>
                            </ul>
                        </div>
                    </td>
                    <td>就餐人数</td>
                    <td>菜品数量</td>
                    <td class="st_pull_td">付款方式<span class="st_pull"></span>
                        <div class="pull_list">
                            <ul id="state_id">
                                <li data-id="1,5">全部</li>
                                <li data-id="1">微信支付</li>
                                <li data-id="5">线下支付</li>
                            </ul>
                        </div>
                    </td>
                    <td>订单金额</td>
                    <td>优惠金额</td>
                    <td>实付金额</td>
                </tr>
            </script>
            <div class="st_zb_title">
                <div class="st_zt_text">今日已完成订单</div>
            </div>
            <div class="st_list_table">
                <table cellspacing="0" cellpadding="0" id="order_table_id">
                    <tr>
                        <td>序号</td>
                        <td>订单编号</td>
                        <td>下单时间</td>
                        <td class="st_pull_td">订单来源<span class="st_pull"></span>
                            <div class="pull_list">
                                <ul id="froms_id">
                                    <li data-id="0,1">全部</li>
                                    <li data-id="0">微信端</li>
                                    <li data-id="1">服务员端</li>
                                </ul>
                            </div>
                        </td>
                        <td>就餐人数</td>
                        <td>菜品数量</td>
                        <td class="st_pull_td">付款方式<span class="st_pull"></span>
                            <div class="pull_list">
                                <ul id="state_id">
                                    <li data-id="1,5">全部</li>
                                    <li data-id="1">微信支付</li>
                                    <li data-id="5">线下支付</li>
                                </ul>
                            </div>
                        </td>
                        <td>订单金额</td>
                        <td>优惠金额</td>
                        <td>实付金额</td>
                    </tr>
                    <!--<tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>
                    <tr><td>1</td><td>1001</td><td>10:30</td><td>微信端</td><td>5</td><td>6</td><td>微信支付</td><td>500</td><td>10</td><td>490</td></tr>-->

                </table>
            </div>
        </div>

    </div>
</section>

<section layout:fragment="extra_scripts">

    <script type="text/javascript" src="/js/template.js"></script>
    <script th:inline="javascript">
        (function () {
            'use strict';
            console.log('statistics.html');
            var froms = "0,1";
            var state = "1,5";


            loadData();
            function loadClick() {
                $(".st_pull_td").off("click");
                $(".st_pull_td").on("click", function () {
                    $(".pull_list").hide();
                    var thisObj = $(this).children(".pull_list");
                    if (thisObj.is(":hidden")) {
                        $(".pull_list").hide();
                        thisObj.show();
                    } else {
                        thisObj.hide();
                    }
                });

                $("#froms_id li").off("click");
                $("#froms_id li").on("click", function (e) {
                    $(".pull_list").hide();
                    var sid = $(this).data("id");
                    froms = sid;
                    loadData();
                    e.stopPropagation();
                });

                $("#state_id li").off("click");
                $("#state_id li").on("click", function (e) {
                    $(".pull_list").hide();
                    var sid = $(this).data("id");
                    state = sid;
                    loadData();
                    e.stopPropagation();
                });
            }

            function loadData() {
                $.ajax({
                    type: "GET",
                    url: "/front/get_order_statistics_data?froms=" + froms + "&state=" + state + "&rank=" + Math.random(),
                    dataType: "json",
                    timeout: 10000,
                    success: function (data) {
                        var orderHtml = template('order_list_none_template', null);
                        if (data) {
                            if (data.zbMap) {
                                if (data.zbMap.peopleTotal == null) {
                                    data.zbMap.peopleTotal = 0;
                                }
                                if (data.zbMap.menuTotal == null) {
                                    data.zbMap.menuTotal = 0;
                                }

                                if (data.zbMap.avgPrice == null) {
                                    data.zbMap.avgPrice = 0;
                                }

                                if (data.zbMap.priceTotal == null) {
                                    data.zbMap.priceTotal = 0;
                                }
                                $("#peopleTotalId").html(data.zbMap.peopleTotal);
                                $("#menuTotalId").html(data.zbMap.menuTotal);
                                $("#avgPriceId").html(data.zbMap.avgPrice);
                                $("#priceTotalId").html(data.zbMap.priceTotal);
                            }

                            if (data.menuTopList) {
                                var menuHtml = template('top_list_template', data.returnMap);
                                $("#top_table_id").html(menuHtml);
                            }

                            if (data.orderList) {
                                var orderContentHtml = template('order_list_template', data.returnMap);
                                orderHtml = orderHtml + orderContentHtml;
                            }
                        }
                        $("#order_table_id").html(orderHtml);
                        loadClick();
                    },
                    error: function (e) {

                    }
                });
            }
        }());
    </script>
</section>
